<template>
  <!-- 选择所属派出所 -->
  <view class="localPolice">
    <view class="policeTitle">
      <u--input v-model="policeAgencyName" :maxlength="15" placeholder="搜索派出所" prefixIcon="search" border="surround"
        clearable @change="changeHandle"></u--input>
      <!-- <view class="searchView" @click="searchHandle">确定</view> -->
    </view>

    <view class="policenameClass" v-for="item in policeList" :key="item.id" @click="rdioHandle(item)">
      <view><u-icon name="search" size="22" color="#BCBCBC"></u-icon></view>
      <view class="nameClass">{{ item.policeAgencyName }}</view>
      <view class="per-radio">
        <image :src="
            item.flag
              ? baseImgUrl + 'choseRadio.png'
              : baseImgUrl + 'nochoose.png'
          "></image>
      </view>
    </view>

    <view v-if="!is_search">
      <u-empty mode="list" text="请搜索派出所" :icon="baseImgUrl + 'no-icon7.png'">
      </u-empty>
    </view>

    <view v-if="is_search && !policeList.length">
      <u-empty mode="list" text="未找到符合的派出所，请重试！" :icon="baseImgUrl + 'no-icon7.png'">
      </u-empty>
    </view>
  </view>
</template>

<script>
  import {
    basePolice
  } from "@/api/myself.js";
  import {
    navBack
  } from "@/utils/util.js";

  export default {
    name: "localPolice",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        policeAgencyName: "",
        is_search: false,
        policeList: [],
      };
    },
    mounted() {
      // this.getList()
    },
    methods: {
      getList() {
        basePolice().then((res) => {
          this.is_search = true;
          this.policeList = res.result.map((v) => ({
            id: v.id,
            policeAgencyName: v.policeAgencyName,
            flag: false,
          }));
        });
      },
      changeHandle(e) {
        if (e) {
          basePolice({
            policeAgencyName: e
          }).then((res) => {
            this.is_search = true;
            this.policeList = res.result.map((v) => ({
              id: v.id,
              policeAgencyName: v.policeAgencyName,
              flag: false,
            }));
          });
        }
      },
      rdioHandle(item) {
        for (var v of this.policeList) {
          v.id == item.id ? (v.flag = true) : (v.flag = false);
        }

        let office = this.policeList.filter((v) => {
          if (v.flag) return v;
        });
        uni.$emit("policeOffice", office);
        navBack();
      },
      searchHandle() {
        if (!this.policeAgencyName) return;

        let office = this.policeList.filter((v) => {
          if (v.flag) return v;
        });
        uni.$emit("policeOffice", office);
        navBack();
      },
    },
  };
</script>

<style lang="scss">
  .localPolice {
    flex: 1;
    padding: 0 15rpx;

    .policeTitle {
      display: flex;
    }

    .searchView {
      margin-left: 10rpx;
      padding-top: 15rpx;
      width: 100rpx;
      text-align: center;
      font-size: 34rpx;
      color: #0081ff;
    }

    .code-btn {
      color: #2488f5;
      font-size: 28rpx;
    }

    .policenameClass {
      display: flex;
      margin-top: 10rpx;
      padding: 10rpx 15rpx;
      border-bottom: 1px solid #e0e0e0;
      font-size: 33rpx;
      color: #3f3f3f;

      .nameClass {
        flex: 1;
        margin-left: 8rpx;
      }

      .per-radio {
        margin-left: 10rpx;
        padding-top: 5rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
</style>